<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大米</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        /* 头部 */

        .head-container {
            background-color: #333;
        }

        .head-warper {
            width: 1200px;
            height: 40px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .head-ul {
            display: flex;
        }

        .head-ul li {
            color: #999;
            font-size: 12px;
        }

        .head-ul li:not(.head-right)::after {
            content: "|";
            margin: 0 5px;
        }

        .head-right span {
            /* color: #999;
            font-size: 14px; */
            margin-left: 20px;
        }

        .head-right {
            color: #999;
            font-size: 14px;
        }


        /* 导航栏 */
        .nav-warper {
            margin: 0 auto;
            width: 1200px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-warper .logo {
            width: 55px;
            height: 55px;
            border: 1px solid;
        }

        .logo img {
            width: 55px;
        }

        .nav-ul {
            width: 600px;
            height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .search {
            width: 230px;
            height: 40px;
            border: 1px solid #999;
        }

        .search span {
            display: inline-block;
            width: 50px;
            height: 100%;
            border-left: 1px solid #999;
            margin-left: 181px;
            box-sizing: border-box;
            font-weight: bolder;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
        }

        /* 产品区 */

        .product-warper {
            width: 1200px;
            height: 400px;
            margin: 0 auto;
            display: flex;
        }

        .product-ul {
            width: 200px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 0 10px;
            box-sizing: border-box;
            background-color: rgb(47, 13, 1);

        }

        .product-ul li {
            height: 30px;
            display: flex;
            justify-content: space-between;
            color: #fff;
            line-height: 30px;
            font-size: 12px;
        }

        .product-right {
            height: 100%;
            flex: 1;
        }

        .product-right img {
            width: 100%;
            height: 100%;
        }

        /* 商城 */

        .goods-container {
            width: 1200px;
            height: 135px;
            margin: 20px auto;
            display: flex;

        }

        .goods-left {
            width: 200px;
            height: 100%;
            padding: 6px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            background-color: #999;

        }

        .goods-left li {
            width: 55px;
            height: 55px;
            border: 1px solid #ececec;
        }



        .goods-left li:first-of-type {
            border-top: none;
            border-left: none;

        }

        .goods-left li:nth-of-type(2) {
            border-top: none;

        }


        .goods-left li:nth-of-type(3) {
            border-top: none;
            border-right: none;

        }

        .goods-left li:nth-of-type(4) {
            border-bottom: none;
            border-left: none;

        }

        .goods-left li:nth-of-type(5) {
            border-bottom: none;
        }

        .goods-left li:nth-of-type(6) {
            border-bottom: none;
            border-right: none;
        }

        .goods-left li p {
            font-size: 12px;
            color: #fff;
            text-align: center;
            margin: 5px 0;
        }

        .goods-right {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: flex-end;
        }

        .goods-right li {
            width: 320px;
            height: 100%;
            margin-left: auto;

        }

        .goods-right li img {
            width: 100%;
            height: 100%;
        }

        /* 明星单品 */

        .star {
            width: 1200px;
            height: 40px;
            margin: 0 auto;
            /* border: 1px solid peru; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: lighter;
        }

        .star-left {
            width: 150px;
            height: 100%;
            line-height: 40px;
            font-size: 20px;
            font-weight: bolder;

        }

        .star-right {
            width: 180px;
            height: 100%;
            /* border: 1px solid green; */
            display: flex;
            justify-content: flex-end;
            align-items: center;

        }

        .star-right span {
            display: inline-block;
            width: 40px;
            height: 18px;
            border: 1px solid #999;
            text-align: center;
            line-height: 18px;

        }

        /* 单品列表 */
        .danpin-warper {
            width: 1200px;
            height: 220px;
            /* border: 1px solid red; */
            margin: 0 auto;
            display: flex;
            justify-content: flex-end;


        }

        .danpin-warper li {
            width: 192px;
            height: 200px;
            border-top: 1px solid orangered;
            margin-left: 5px;
            background-color: #ececec;
            text-align: center;
            box-sizing: border-box;
        }

        .danpin-warper li img {
            width: 100%;

        }

        .danpin-p1 {
            font-size: 12px;
            margin: 5px auto;
        }

        .danpin-p2 {
            font-size: 10px;
            color: #666;
        }

        /* 智能硬件 */

        .ai-container {
            width: 1200px;
            margin: 0 auto;
            /* border: 1px solid blue; */
            /* padding: 0 20px 20px; */
            box-sizing: border-box;
        }

        .ai-container p {

            line-height: 40px;
            font-size: 20px;

        }


        .ai-warper {
            display: flex;
            height: 450px;
            padding: 10px;
        }

        .ai-left {
            width: 200px;
            /* border: 1px solid green; */
            height: 450px;
        }

        .ai-left img {
            width: 100%;
            height: 100%;
        }

        .ai-right {
            flex: 1;
            /* border: 1PX solid red; */
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
        }


        .ai-right li {
            width: 200px;
            height: 213px;
            /* border: 1px solid purple; */
            margin-left: auto;
        }

        .ai-right li img {
            width: 50%;
            margin-left: 46px;
        }

        .ai-word {
            /* border: 1px solid red; */
            width: 164px;
            height: 75px;
            line-height: 16px;
            margin: 10px auto;
            text-align: center;

        }

        .ai-word .word-1 {
            font-size: 14px;
        }

        .ai-word .word-2 {
            display: inline-block;
            font-size: 12px;
            color: #666;
            margin: 6px auto;
        }

        .ai-word .word-3 {
            font-size: 14px;
            color: red;
        }

        /* 服务 */

        .fuwu-container {
            width: 1200px;
            height: 40px;
            margin: 0 auto;
            /* border: 1px solid green; */
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #999;
        }

        .fuwu-warper {
            width: 600px;
            display: flex;

        }

        .fuwu-warper li {
            font-size: 14px;
            color: #666;
        }

        .fuwu-warper li:not(.fuwu-last)::after {
            content: "|";
            margin: 0 4px;
        }

        /* 尾部 */
        .feet-container {
            width: 1200px;
            height: 165px;
            margin: 0 auto;
            /* border: 1px solid blue; */
            display: flex;
        }

        .feet-left {
            width: 800px;
            height: 100%;
            /* border: 1px solid red; */
            display: flex;

        }

        .feet-left ul {
            /* border: 1px solid orangered; */
            margin-left: 80px;
            padding-top: 20px;
            box-sizing: border-box;
        }

        .feet-left-1 li {
            font-size: 12px;
            color: #999;
            margin-bottom: 3px;
            text-align: center;
        }

        .feet-left-1 li:first-of-type {
            font-size: 14px;
            color: #000;
            margin: 5px;
        }

        .feet-right {
            flex: 1;
            /* border: 1px solid green; */
            display: flex;
            align-items: center;
        }

        .feet-right span {
            display: inline-block;
            width: 120px;
            height: 35px;
            border: 1px solid orangered;
            line-height: 35px;
            color: orangered;
            margin-top: 4px;
        }

        .feet-right-warper {
            /* border: 1px solid red; */
            width: 200px;
            margin-left: 98px;
            text-align: center;
        }

        .feet-right-warper h2{
            color: orangered;
        }

        /* 最后 */

        .last-container {
            width: 1200px;
            height: 50px;
            margin: 0 auto;
            /* border: 1px solid; */
            display: flex;
            align-items: center;
        }

        .last-logo {
            width: 50px;
            height: 50px;
            /* border: 1px solid red; */
        }

        .last-logo img{
            width: 100%;
            height: 100%;
        }

        .last-span{
            font-size: 12px;
            color: #999;
            margin-left: 10px;
        }
    </style>

</head>

<body>
    <div class="container">

        <!-- 头部 -->
        <div class="head-container">
            <div class="head-warper">
                <ul class="head-ul">
                    <li>大米网 <span>&gt;</span></li>
                    <li>MIUI<span>&gt;</span></li>
                    <li>米聊<span>&gt;</span></li>
                    <li>游戏<span>&gt;</span></li>
                    <li>多看阅读<span>&gt;</span></li>
                    <li>云服务<span>&gt;</span></li>
                    <li>大米移动版<span>&gt;</span></li>
                    <li>问题反馈<span>&gt;</span></li>
                    <li class="head-last">Select Region</li>
                </ul>

                <div class="head-right">
                    登录 | 注册
                    <span>购物车（0）</span>
                </div>

            </div>

        </div>


        <!-- 导航栏 -->
        <div class="nav-container">
            <div class="nav-warper">

                <div class="logo"><img src="../HTML阶段测试/学生用资源/image/xiaomi_logo.png" alt=""></div>

                <ul class="nav-ul">
                    <li>大米手机</li>
                    <li>红米</li>
                    <li>平板</li>
                    <li>电视</li>
                    <li>盒子</li>
                    <li>路由器</li>
                    <li>智能硬件</li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>


                <div class="search">
                    <span>GO</span>
                </div>

            </div>
        </div>


        <!-- 产品区 -->

        <div class="product-warper">

            <ul class="product-ul">
                <li>手机 平板 <span>&gt;</span></li>
                <li>电视 盒子<span>&gt;</span></li>
                <li>路由器 智能配件<span>&gt;</span></li>
                <li>移动电源 插线板<span>&gt;</span></li>
                <li>耳机 音箱<span>&gt;</span></li>
                <li>电池 存储卡<span>&gt;</span></li>
                <li>保护套 后盖<span>&gt;</span></li>
                <li>贴膜 其他配件<span>&gt;</span></li>
                <li>米兔 服装<span>&gt;</span></li>
                <li>背包 其他周边<span>&gt;</span></li>
            </ul>

            <div class="product-right">
                <img src="../HTML阶段测试/学生用资源/image/T1vWdTBKDv1RXrhCrK.jpg" alt="">
            </div>

        </div>

        <!-- 商城 -->

        <div class="goods-container">
            <ul class="goods-left">
                <li>
                    <p>START</p>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <p>开放购买</p>
                </li>

            </ul>

            <ul class="goods-right">
                <li><img src="../HTML阶段测试/学生用资源/image/T184E_BQWT1RXrhCrK.jpg" alt=""></li>
                <li><img src="../HTML阶段测试/学生用资源/image/T184E_BQWT1RXrhCrK.jpg" alt=""></li>
                <li><img src="../HTML阶段测试/学生用资源/image/T184E_BQWT1RXrhCrK.jpg" alt=""></li>

            </ul>

        </div>

        <!-- 明星单品 -->

        <div class="star">
            <p class="star-left">
                大米明星单品
            </p>

            <div class="star-right">
                <span>&lt;</span>
                <span>&gt;</span>
            </div>
        </div>


        <!-- 单品列表 -->
        <div class="danpin-container">
            <ul class="danpin-warper">
                <li><img src="../HTML阶段测试/学生用资源/image/mitv48!160x110.jpg" alt="">
                    <p class="danpin-p1">大米电视2/2S 全系列</p>
                    <p class="danpin-p2"> 40/48/49/55英寸 现货购买</p>
                </li>

                <li><img src="../HTML阶段测试/学生用资源/image/mitv48!160x110.jpg" alt="">
                    <p class="danpin-p1">大米电视2/2S 全系列</p>
                    <p class="danpin-p2"> 40/48/49/55英寸 现货购买</p>
                </li>

                <li><img src="../HTML阶段测试/学生用资源/image/mitv48!160x110.jpg" alt="">
                    <p class="danpin-p1">大米电视2/2S 全系列</p>
                    <p class="danpin-p2"> 40/48/49/55英寸 现货购买</p>
                </li>

                <li><img src="../HTML阶段测试/学生用资源/image/mitv48!160x110.jpg" alt="">
                    <p class="danpin-p1">大米电视2/2S 全系列</p>
                    <p class="danpin-p2"> 40/48/49/55英寸 现货购买</p>
                </li>

                <li><img src="../HTML阶段测试/学生用资源/image/mitv48!160x110.jpg" alt="">
                    <p class="danpin-p1">大米电视2/2S 全系列</p>
                    <p class="danpin-p2"> 40/48/49/55英寸 现货购买</p>
                </li>

                <li><img src="../HTML阶段测试/学生用资源/image/mitv48!160x110.jpg" alt="">
                    <p class="danpin-p1">大米电视2/2S 全系列</p>
                    <p class="danpin-p2"> 40/48/49/55英寸 现货购买</p>
                </li>

            </ul>

        </div>

        <!-- 智能硬件 -->

        <div class="ai-container">
            <p>智能硬件</p>
            <div class="ai-warper">
                <div class="ai-left">
                    <img src="../HTML阶段测试/学生用资源/image/T1IhLjBC_T1RXrhCrK.jpg" alt="">
                </div>

                <ul class="ai-right">
                    <li>
                        <img src="../HTML阶段测试/学生用资源/image/T16nVjBCKT1RXrhCrK.jpg" alt="">
                        <div class="ai-word">
                            <span class="word-1">小蚁运动机</span><br>
                            <span class="word-2">边玩边录边拍，手机随时分享</span><br>
                            <span class="word-3">399元</span>
                        </div>

                    </li>

                    <li>
                        <img src="../HTML阶段测试/学生用资源/image/T16nVjBCKT1RXrhCrK.jpg" alt="">
                        <div class="ai-word">
                            <span class="word-1">小蚁运动机</span><br>
                            <span class="word-2">边玩边录边拍，手机随时分享</span><br>
                            <span class="word-3">399元</span>
                        </div>

                    </li>

                    <li>
                        <img src="../HTML阶段测试/学生用资源/image/T16nVjBCKT1RXrhCrK.jpg" alt="">
                        <div class="ai-word">
                            <span class="word-1">小蚁运动机</span><br>
                            <span class="word-2">边玩边录边拍，手机随时分享</span><br>
                            <span class="word-3">399元</span>
                        </div>

                    </li>

                    <li>
                        <img src="../HTML阶段测试/学生用资源/image/T16nVjBCKT1RXrhCrK.jpg" alt="">
                        <div class="ai-word">
                            <span class="word-1">小蚁运动机</span><br>
                            <span class="word-2">边玩边录边拍，手机随时分享</span><br>
                            <span class="word-3">399元</span>
                        </div>

                    </li>

                    <li>
                        <img src="../HTML阶段测试/学生用资源/image/T16nVjBCKT1RXrhCrK.jpg" alt="">
                        <div class="ai-word">
                            <span class="word-1">小蚁运动机</span><br>
                            <span class="word-2">边玩边录边拍，手机随时分享</span><br>
                            <span class="word-3">399元</span>
                        </div>

                    </li>

                    <li>
                        <img src="../HTML阶段测试/学生用资源/image/T16nVjBCKT1RXrhCrK.jpg" alt="">
                        <div class="ai-word">
                            <span class="word-1">小蚁运动机</span><br>
                            <span class="word-2">边玩边录边拍，手机随时分享</span><br>
                            <span class="word-3">399元</span>
                        </div>

                    </li>

                    <li>
                        <img src="../HTML阶段测试/学生用资源/image/T16nVjBCKT1RXrhCrK.jpg" alt="">
                        <div class="ai-word">
                            <span class="word-1">小蚁运动机</span><br>
                            <span class="word-2">边玩边录边拍，手机随时分享</span><br>
                            <span class="word-3">399元</span>
                        </div>

                    </li>

                    <li>
                        <img src="../HTML阶段测试/学生用资源/image/T16nVjBCKT1RXrhCrK.jpg" alt="">
                        <div class="ai-word">
                            <span class="word-1">小蚁运动机</span><br>
                            <span class="word-2">边玩边录边拍，手机随时分享</span><br>
                            <span class="word-3">399元</span>
                        </div>

                    </li>

                </ul>

            </div>
        </div>

        <!-- 服务 -->
        <div class="fuwu-container">

            <ul class="fuwu-warper">

                <li>1小时快修服务</li>
                <li>7天无理由退货</li>
                <li>15天免费换货</li>
                <li>满150元包邮</li>
                <li class="fuwu-last">520余家售后网点</li>

            </ul>


        </div>

        <!-- 尾部 -->
        <div class="feet-container">

            <div class="feet-left">

                <ul class="feet-left-1">
                    <li>帮助中心</li>
                    <li>购物指南 </li>
                    <li>支付方式</li>
                    <li> 配送方式</li>
                </ul>

                <ul class="feet-left-1">
                    <li>服务支持</li>
                    <li>售后政策</li>
                    <li>自助服务</li>
                    <li>相关下载</li>
                </ul>

                <ul class="feet-left-1">
                    <li>大米之家</li>
                    <li>大米之家</li>
                    <li>服务网点</li>
                    <li>预约亲临到店服务</li>
                </ul>

                <ul class="feet-left-1">
                    <li>关注我们</li>
                    <li>新浪微博</li>
                    <li>大米部落</li>
                    <li>官方微信</li>
                </ul>
            </div>







            <div class="feet-right">
                <div class="feet-right-warper">
                    <h2>400-100-5678</h2>
                    <p> 周一至周日 8:00-18:00 <br> （仅收市话费）</p>

                    <span>24小时在线客服</span>
                </div>

            </div>
        </div>

        <div class="last-container">
            <div class="last-logo">
                <img src="../HTML阶段测试/学生用资源/image/xiaomi_logo.png" alt="">
            </div>

            <span class="last-span">
                大米网|MIUI|米聊|多看书城|大米路由器|大米后院|大米天猫店|大米淘宝直营店|大米网盟|问题反馈|Select Region 5555555号
            </span>
        </div>

    </div>

</body>

</html>